{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name=renderer content=webkit>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Cache-Control" content="max-age=7200"/>
    <meta name="keywords" content="{% if site_keywords != None %}{{ site_keywords }}{% endif %}"/>
    <meta name="description" content="{% if site_desc != None %}{{ site_desc }}{% endif %}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{% if site_name != None and site_name != '' %}{{ site_name }} {% else %}{% trans "站点标题" %}{% endif %} -
        {% if site_sub_name != None %}{{ site_sub_name }} {% else %}{% trans "又一个MrDoc站点" %}{% endif %}</title>
    <link href="{% static 'layui/css/layui.css' %}?version={{ mrdoc_version }}" rel="stylesheet">
    <link href="{% static 'mrdoc/mrdoc.css' %}?version={{ mrdoc_version }}" rel="stylesheet">
    <link href="{% static 'iconFont/iconfont.css' %}?version={{ mrdoc_version }}" rel="stylesheet">
    <link href="{% static 'mrdoc/topnew.css' %}?version={{ mrdoc_version }}" rel="stylesheet">
    <link rel="icon" href="{% static 'favicon.ico' %}"/>
    <style>


        .layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this {
            background-color: #333 !important;
        }

        /* layui分页组件样式 */
        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #333 !important;
        }

        .layui-form-label {
            width: 30px !important;
        }

        .layui-input-block {
            margin-left: 60px !important;
        }

        /* 控制栏表单下拉框样式 */
        .index-control .layui-input-inline {
            width: 100px;
        }

        .index-control .layui-input {
            height: 25px;
            border: none;
        }

        .index-control .layui-form-select dl {
            top: 30px;
        }

        .index-control .layui-form-item {
            margin-bottom: 0px;
        }

        /* 文集列表样式 */
        .project-item-list {
            /* float: left; */
            min-width: 0;
            width: 100vw;
            height: 120px;
            /* margin-top: 20px; */
            /* margin-left: 20px; */
            margin: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .055);
        }

        /* 移动端筛选控制栏样式 */
        @media screen and (max-width: 768px) {
            /* 控制栏样式 */
            .index-control .layui-form-item .layui-inline {
                display: flex;
            }

            .index-control .layui-form-item .layui-input-inline {
                display: -webkit-inline-box;
                float: none;
                left: -3px;
                /* width: auto; */
                margin: 0;
            }

        }

        .carousel-mid-search {
            background-image: url("{% static 'search/search_bg.png' %}");
            background-size: contain;
            height: 256px;
            text-align: center;
        }
        .layui-this{
    border-left: 2px solid #D95F29;
}
.layui-nav .layui-this a{
    color: #D95F29;
}
    </style>
</head>
<body class="layui-container">
<!-- 页头 -->
{% include 'app_doc/head_base.html' %}
<!-- 页头结束 -->

<!-- 首页中间搜索 -->
{% include 'app_doc/mid_search_base.html' %}
<!-- 首页中间搜索结束 -->


<!-- 主体 -->
<div class="layui-container project-list-content">
    <div class="layui-row collect-menu layui-col-md12 project-col-list">
        <div class="layui-col-md121">
            <h3 class="project-col-list-h3">文档类别</h3>
        </div>

        <ul class="layui-nav layui-nav-tree collect-menu-ul" lay-filter="test">
            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
            {% for p in project_collect_list %}
                {% if forloop.first %}
                    <li class="layui-nav-item layui-this">
                        {% else %}
                    <li class="layui-nav-item">
                {% endif %}

            <a href="#collect-{{ p.id }}">{{ p.name }}</a>
            </li>
            {% endfor %}
        </ul>

    </div>
    <!-- 遍历文集列表 -->
    {% load project_filter %}

    <div class="layui-row layui-col-space10 collect-conetnt">

        {% for p in project_collect_list %}
            <!-- 网格布局 -->
            <div class="layui-col-md12 project-col-list" id="project-col-{{ p.id }}">
                <h3 class="project-col-list-h3" id="collect-{{ p.id }}">{{ p.name }}</h3>
                <div class="layui-row-collect">
                    <ul class="layui-projetc-ul">
                    {% for new_project in p.id|get_new_project %}

                        <li class="layui-projetc-ul-li">

                    <span class="layui-breadcrumb">
                    <a href="{% url 'pro_index' new_project.id %}" target="_self"
                       title="{{ new_project.name }}">{{ new_project.name }}</a>

                    </span>
                        </li>
                    {% endfor %}
                    </ul>
                </div>

            </div>
            <!-- 网格布局结束 -->
        {% endfor %}
    </div>

    {% if project_list.count == 0 %}
        <div>
            <img src="{% static 'non_doc.png' %}" style="width: 100%;height:auto;">
        </div>
    {% endif %}
</div>

<!-- 主体结束 -->


<!-- 页脚 -->
{% include 'app_doc/foot_base.html' %}
<!-- 页脚结束 -->


<script src="{% static 'iconFont/iconfont.js' %}?version={{ mrdoc_version }}"></script>
<script src="{% static 'jquery/3.1.1/jquery.min.js' %}"></script>
<script src="{% static 'layui/layui.js' %}?version={{ mrdoc_version }}"></script>
{% block custom_script %}
    <script>
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });
        var top1 = $(".collect-menu").offset().top;
        $(window).onload = function () {
            var win_top = $(this).scrollTop();
            if (win_top >= top) {

                $(".collect-menu").addClass("collect-menu-fixed");

            }
        }
        $(window).scroll(function () {

            var win_top = $(this).scrollTop();

            var top = $(".collect-menu").offset().top;
            {#console.log(win_top, top, top1)#}
            if (win_top >= top) {

                $(".collect-menu").addClass("collect-menu-fixed");

            }

            if (win_top < top1) {

                $(".collect-menu").removeClass("collect-menu-fixed");

            }
            console.log("网络距顶部距离："+$("#collect-2").offset().top)
            console.log("浏览器高度："+$(window).height())
            console.log("滚动距离："+$(document).scrollTop())

            var a = $("#collect-2").offset().top - $(document).scrollTop() - $(window).height();

                var b = $("#collect-2").height() + $(window).height();

                if(a>0 || a < -b){

                // 该div不在屏幕显示范围内
                    {#console.log("网络滑出")#}

                }


        })


        // 动态生成文集图标列表
        for (var i = 1; i < 44; i++) {
            var icon_elem = '<div class="layui-iconpicker-icon-item" style="width:20%" data-icon="mrdoc-icon-pro-' + i + '"><svg class="icon" aria-hidden="true"><use xlink:href="#mrdoc-icon-pro-' + i + '"></use></svg></div>'
            $("#mrdoc-project-icon-list").append(icon_elem)
        }
        // 点击图标选择按钮
        $("#project-icon-select").click(function () {
            $("#project-icon-select-box").toggleClass("hide-project-icon-list")
        });
        // 选中图标
        $(".layui-iconpicker-icon-item").click(function (e) {
            var selected_icon = e.currentTarget.dataset.icon;
            var selected_icon_svg = '<svg class="icon" aria-hidden="true"><use xlink:href="#' + selected_icon + '"></use></svg>'
            console.log(selected_icon)
            $("#project-icon-select").html(selected_icon_svg);
            $("#picon").val(selected_icon);
            $("#project-icon-select-box").toggleClass("hide-project-icon-list");
        })

    </script>

    <!-- 统计代码开始 -->
    {% if debug %}
    {% else %}
        {{ static_code | safe }}
    {% endif %}
    <!-- 统计代码结束 -->

{% endblock %}
</body>
</html>